highQuery - פריימוורק עיצובי חזק ומהיר ! מעכשיו לעצב את כל האתר במינימום קוד ! (ללא ידע מוקדם בשפות צד שרת \ JS)
ובמדריך הנ"ל : נלמד להכין תפריטי ניווט עליון (Navbar) . אחד פשוט , והשני יותר מתקדם עם סאב קטגוריות .
אהלן.
מדריך ראשון : הקדמה
בואו נתחיל ישר לעבוד .
מהם התכונות* החדשות שנתעסק איתם במדריך ?
data-roll = התכונה הזו צריכה לקבל את הייעוד של התגית וכך היא גם משייכת לה את העיצוב .
לדוגמא : במדריך הזה אנו מדברים על תפריט ניווט עליון , ולכן הערך של המאפיין יהיה "navbar"
fixed = התכונה הזו מקבלת רק true\false .
אם true : המיקום שלו יהיה מתוקן (fixed) מוצמד לראש האתר . כלומר תמיד הוא יהיה למעלה , גם אם אם אתה גולל למטה , הוא עדיין יופיע בראש .
אם false : יהיה במקום שמיקמת אותו לפי ההירכיה של הקוד .
לדוגמא האם מיקמת אותו תחת התמונה , הוא יופיע שמה (כblock ).
קלאסים (class) יחודיים שמופיעים בקוד של תפריט ניווט עליון .
branded = מוסיפים אותו לli של דף הבית .
מה הוא עושה ?
# הוא הופך את האותיות הקטנות לגדולות (home => HOME) - רק במידה והאותיות באנגלית
# מגדיל את האותיות (font-size) ומשנה את הצבע מאפור לשחור .
sub = מוסיפים ל li שברצונכם להפוך לסאב קטגוריה- כלומר ליצור סאב קטגוריה מעוצבת .
דוגמא :
<div data-roll="navbar" fixed="false">
<ul>
<li class="branded"><a href="#">Home</a></li> // יהפוך ל HOME
<li><a href="#">Download</a></li>
<li class="sub"><a href="#">Site link with submenu</a>
<ul>
<li><a href="#">First sub link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
<ul>
<li class="branded"><a href="#">Home</a></li> // יהפוך ל HOME
<li><a href="#">Download</a></li>
<li class="sub"><a href="#">Site link with submenu</a>
<ul>
<li><a href="#">First sub link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
כמובן שניתן לעשות סאב קטגוריה בתוך סאב קטגוריה (נסו בעצמכם ! )
ועכשיו לתכלס איך עושים את זה.
תפריט ניווט עליון רגיל
לתוצאה כזו :
נכתוב קוד כזה :
<div data-roll="navbar" fixed="false">
<ul>
<li class="branded"><a href="#">Homelt;/a></li>
<li><a href="#">Site link 1</a></li>
<li><a href="#">Site link 2</a></li>
<li><a href="#">Site link 3</a></li>
</ul>
</div>
<ul>
<li class="branded"><a href="#">Homelt;/a></li>
<li><a href="#">Site link 1</a></li>
<li><a href="#">Site link 2</a></li>
<li><a href="#">Site link 3</a></li>
</ul>
</div>
תפריט ניווט עליון עם סאב קטגוריה
לתוצאה כזו :
נכתוב קוד כזה:
<div data-roll="navbar" fixed="false">
<ul>
<li class="branded"><a href="#">Home</a></li>
<li class="sub"><a href="#">Site link with submenu</a>
<ul>
<li><a href="#">First sub link</a></li>
<li class="sub"><a href="#">Second sub link</a>
<ul>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li><a href="#">Another site link</a></li>
</ul>
</div>
<ul>
<li class="branded"><a href="#">Home</a></li>
<li class="sub"><a href="#">Site link with submenu</a>
<ul>
<li><a href="#">First sub link</a></li>
<li class="sub"><a href="#">Second sub link</a>
<ul>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li><a href="#">Another site link</a></li>
</ul>
</div>
מושגים חדשים
*תכונות- הכוונה היא למאפיינים של תג HTML . כלומר ערך נוסף לתג .
כגון :
<ul id="navbar" תכונה"=ערך" data-roll="התפקיד של התגית באתר ושיוך העיצוב לתגית" class="StyleClass" >
</ul>
</ul>
(מקווה שאני ברור ... )
בהצלחה!
במדריך הבא (בלי נדר) : עבודה עם טפסים . עיצוב טפסים ברמה מעולה !
תגובות לכתבה:
עבודה יפה, פריימוורק בהחלט עם עתיד רחב.
ניראה לאן זה ייתקדם..
בהצלחה!
באמת פריימוורק מעולה
חוסך הרבה מאוד עבודה
המשך כך עם המדריכים ;)
תודה .
המדריך הבא באמת מגניב . כפתורים ממש ממש מגניבים שעובדים גם במובייל ועוד דברים מגניבים
(וכמובן שיכולים לעבוד עם PHP - $_POST למרות שהם בנויים מדיב...)